// 图片懒加载处理

import eventBus from '@/eventBus';
import debounce from '@/utils/debounce';
import defaultGif from '@/assets/default.gif';

let imgs = new Set()

function setImage(img) {
    img.dom.src = defaultGif;
    // 获取html的高度
    const clientHeight = document.documentElement.clientHeight;
    // 得到当前图片的信息
    const imgRect = img.dom.getBoundingClientRect();
    // 刚开始元素还没加载出高度，如果没有，默认值150
    const height = imgRect.height || 150
    // 图片的top是否超过自身的高度（向上超出）
    // 图片的top是否超过了可视区域的高度（向下超出）
    if (imgRect.top >= -height && imgRect.top <= clientHeight) {
        img.dom.src = img.src
        // 已经加载过的从数组集合删除 不再参与处理
        imgs.delete(img);
    }
}

function setImages() {
    for (const img of imgs) {
        setImage(img)
    }
}

function handleScroll() {
    setImages()
}

eventBus.$bus.$on('mainScroll', debounce(handleScroll, 50))

export default {
    inserted(el, bindings) {
        const img = {
            dom: el,
            src: bindings.value
        };
        imgs.add(img);
        // 刚开始就得处理一次当前图片
        setImage(img);
    }
}